<template>
  <div class="app-container home">
    <!-- 搜索栏 -->
    <div class="search-section">
      <div class="search-container">
        <div class="website-title">雅韵旧书网</div>
        <div class="search-box">
          <el-input
            v-model="searchQuery.keyword"
            placeholder="请输入书名搜索"
            class="search-input"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button type="primary" @click="handleSearch">
                <el-icon><search /></el-icon>
                搜索
              </el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 轮播图区域 -->
    <el-carousel height="400px" class="banner" :interval="4000">
      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
        <div class="banner-content">
          <img :src="item.image" :alt="item.title"/>
          <div class="banner-text">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 分类标签 -->
    <div class="category-section">
      <div class="category-container">
        <div class="category-tabs">
          <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane 
              v-for="category in categories" 
              :key="category.value" 
              :label="category.label" 
              :name="category.value"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="auction-entrance" @click="goToAuction">
          <el-icon><Timer /></el-icon>
          <span>拍卖专区</span>
          <el-tag type="danger" size="small" effect="dark">HOT</el-tag>
        </div>
      </div>
    </div>

    <!-- 图书展示区 -->
    <div class="section">
      <h2>{{ activeCategory === 'all' ? '全部图书' : getCategoryLabel(activeCategory) }}</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="book in categoryBooks" :key="book.id">
          <el-card :body-style="{ padding: '0px' }" class="book-card" @click="handleBookClick(book.id)">
            <img :src="getImageUrl(book.pic)" class="book-image"/>
            <div class="book-info">
              <h3>{{ book.name }}</h3>
              <p class="author">{{ book.brandName }}</p>
              <p class="price">¥{{ book.price }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 添加分页器 -->
      <el-pagination
        v-if="total > 0"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加页脚部分 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于我们</h3>
          <ul>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">加入我们</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>帮助中心</h3>
          <ul>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">支付方式</a></li>
            <li><a href="#">配送方式</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>售后服务</h3>
          <ul>
            <li><a href="#">退换货政策</a></li>
            <li><a href="#">退换货流程</a></li>
            <li><a href="#">常见问题</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>关注我们</h3>
          <ul>
            <li><a href="#">微信公众号</a></li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">企业微信</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>Copyright © 2024 书籍商城. All Rights Reserved.</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Picture, ArrowRight, Timer } from '@element-plus/icons-vue'
import { frontListBook } from '@/api/merchant/book'
import { frontListCategory } from '@/api/merchant/category'
import { ElMessage } from 'element-plus'

const router = useRouter()
const searchQuery = ref({
  keyword: ''
})
const categories = ref([])
const activeCategory = ref('all')
const categoryBooks = ref([])
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 8
})

// 轮播图数据
const bannerList = ref([
  {
    image: new URL('@/assets/images/lunbo1.jpg', import.meta.url).href,
    title: '发现珍贵典籍',
    description: '探索历史文化的瑰宝'
  },
  {
    image: new URL('@/assets/images/lunbo2.jpg', import.meta.url).href,
    title: '品味书香生活',
    description: '感受阅读带来的美好'
  },
  {
    image: new URL('@/assets/images/lunbo3.jpg', import.meta.url).href,
    title: '寻找心仪好书',
    description: '遇见知识的美好时光'
  }
])

// 获取分类列表
const getCategoryList = async () => {
  try {
    const response = await frontListCategory()
    if (response.code === 200) {
      // 只获取启用状态的分类
      categories.value = response.rows
        .filter(item => item.status === 1)
        .map(item => ({
          label: item.name,
          value: item.id.toString()
        }))
    }
  } catch (error) {
    console.error('获取分类列表失败:', error)
    ElMessage.error('获取分类列表失败')
  }
}

// 获取商品列表
const getProductList = async () => {
  try {
    const params = {
      pageNum: queryParams.value.pageNum,
      pageSize: queryParams.value.pageSize,
      categoryId: activeCategory.value !== 'all' ? activeCategory.value : undefined,
      publishStatus: 1  // 只显示上架商品
    }
    const response = await frontListBook(params)
    if (response.code === 200) {
      categoryBooks.value = response.rows
      total.value = response.total
    }
  } catch (error) {
    console.error('获取商品列表失败:', error)
    ElMessage.error('获取商品列表失败')
  }
}

// 处理商品点击
const handleBookClick = (id) => {
  router.push(`/product/detail/${id}`)
}

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.keyword.trim()) {
    router.push({
      path: '/search',
      query: { 
        keyword: searchQuery.value.keyword.trim()
      }
    })
  } else {
    ElMessage({
      message: '请输入搜索关键词',
      type: 'warning'
    })
  }
}

// 处理分类切换
const handleCategoryChange = (tab) => {
  activeCategory.value = tab.props.name
  queryParams.value.pageNum = 1
  getProductList()
}

// 处理分页
const handleCurrentChange = (page) => {
  queryParams.value.pageNum = page
  getProductList()
}

// 跳转到拍卖专区
const goToAuction = () => {
  router.push('/auction')
}

// 获取图片URL
const getImageUrl = (pic) => {
  if (!pic) {
    return new URL('@/assets/images/default-book.jpg', import.meta.url).href
  }
  if (pic.startsWith('http')) {
    return pic
  }
  return import.meta.env.VITE_APP_BASE_API + pic
}

// 获取分类标签
const getCategoryLabel = (value) => {
  if (value === 'all') return '全部图书'
  const category = categories.value.find(c => c.value === value)
  return category ? category.label : '全部图书'
}

onMounted(() => {
  getCategoryList()
  getProductList()
})
</script>

<style lang="scss" scoped>
.home {
  background: linear-gradient(135deg, #f6f8fb 0%, #f1f4f9 100%);
  min-height: 100vh;

  .search-section {
    padding: 24px 0;
    background: linear-gradient(to bottom, #fff, #f8f9fa);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    
    .search-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;

      .website-title {
        font-size: 36px;
        font-weight: 700;
        background: linear-gradient(45deg, #8B4513, #D2691E);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: "楷体", KaiTi, serif;
        letter-spacing: 2px;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(45deg, #8B4513, #D2691E);
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }
        
        &:hover::after {
          transform: scaleX(1);
        }
      }

      .search-box {
        width: 500px;

        .search-input {
          :deep(.el-input__wrapper) {
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            padding: 4px;
            
            &:hover {
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            }
            
            &.is-focus {
              box-shadow: 0 6px 20px rgba(139, 69, 19, 0.15);
            }
          }

          :deep(.el-input-group__append) {
            background: linear-gradient(45deg, #8B4513, #D2691E);
            border: none;
            padding: 0;
            border-radius: 0 12px 12px 0;
            overflow: hidden;
            
            .el-button {
              color: white;
              border: none;
              height: 40px;
              padding: 0 24px;
              font-size: 16px;
              font-weight: 500;
              transition: all 0.3s ease;
              
              .el-icon {
                margin-right: 6px;
                font-size: 18px;
              }
              
              &:hover {
                background: linear-gradient(45deg, #D2691E, #8B4513);
                transform: translateY(-1px);
              }
            }
          }
        }
      }
    }
  }

  .banner {
    margin: 0 auto 40px;
    max-width: 1200px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    :deep(.el-carousel__container) {
      border-radius: 24px;
    }
    
    .banner-content {
      position: relative;
      width: 100%;
      height: 100%;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      
      .banner-text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 40px;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        color: #fff;
        text-align: left;
        
        h2 {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 12px;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        p {
          font-size: 18px;
          opacity: 0.9;
          text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
      }
    }
    
    :deep(.el-carousel__arrow) {
      background-color: rgba(139, 69, 19, 0.7);
      border-radius: 50%;
      
      &:hover {
        background-color: rgba(139, 69, 19, 0.9);
      }
    }
    
    :deep(.el-carousel__indicators) {
      .el-carousel__button {
        background-color: rgba(139, 69, 19, 0.7);
        border-radius: 4px;
        width: 24px;
        
        &:hover {
          background-color: rgba(139, 69, 19, 0.9);
        }
      }
    }
  }

  .category-section {
    margin: 40px auto;
    background: #fff;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    max-width: 1200px;
    
    .category-container {
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .category-tabs {
        flex: 1;
        
        :deep(.el-tabs__header) {
          margin: 0;
          border: none;
        }
        
        :deep(.el-tabs__nav-wrap::after) {
          display: none;
        }
        
        :deep(.el-tabs__item) {
          font-size: 16px;
          padding: 0 24px;
          height: 44px;
          line-height: 44px;
          transition: all 0.3s ease;
          color: #666;
          
          &.is-active {
            color: #8B4513;
            font-weight: 600;
          }
          
          &:hover {
            color: #8B4513;
          }
        }
        
        :deep(.el-tabs__active-bar) {
          background: linear-gradient(45deg, #8B4513, #D2691E);
          height: 3px;
          border-radius: 3px;
        }
      }
      
      .auction-entrance {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        background: linear-gradient(45deg, #8B4513, #D2691E);
        border-radius: 24px;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(139, 69, 19, 0.25);
        }
        
        .el-icon {
          font-size: 20px;
        }
        
        span {
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 1px;
        }
        
        .el-tag {
          margin-left: 8px;
          border: none;
          background: rgba(255, 255, 255, 0.2);
          color: #fff;
        }
      }
    }
  }

  .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;

    h2 {
      font-size: 28px;
      color: #2c3e50;
      margin-bottom: 28px;
      padding-left: 16px;
      border-left: 4px solid #8B4513;
      font-weight: 600;
      display: flex;
      align-items: center;
      
      &::after {
        content: '';
        flex: 1;
        height: 2px;
        background: linear-gradient(to right, #8B4513, transparent);
        margin-left: 20px;
      }
    }

    .book-card {
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 24px;
      border: none;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(145deg, #ffffff, #f8f9fa);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        
        .book-image {
          transform: scale(1.05);
        }
      }

      .book-image {
        width: 100%;
        height: 240px;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .book-info {
        padding: 20px;

        h3 {
          font-size: 18px;
          color: #2c3e50;
          margin: 0 0 12px;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .author {
          font-size: 15px;
          color: #7f8c8d;
          margin-bottom: 12px;
          font-weight: 500;
        }

        .price {
          background: linear-gradient(45deg, #8B4513, #D2691E);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 22px;
          font-weight: 700;
        }
      }
    }
    
    :deep(.el-pagination) {
      margin-top: 40px;
      text-align: center;
      
      .el-pagination__total,
      .el-pagination__jump,
      .btn-prev,
      .btn-next {
        background: transparent;
        color: #666;
        font-weight: 500;
      }
      
      .el-pager li {
        background: transparent;
        color: #666;
        border-radius: 4px;
        margin: 0 4px;
        min-width: 32px;
        
        &.active {
          background: linear-gradient(45deg, #8B4513, #D2691E);
          color: #fff;
          font-weight: 600;
        }
        
        &:hover:not(.active) {
          color: #8B4513;
        }
      }
    }
  }

  .footer {
    margin-top: 80px;
    padding: 60px 0 40px;
    background: linear-gradient(to bottom, #f8f9fa, #fff);
    border-top: 1px solid #eee;
    
    .footer-content {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      
      .footer-section {
        h3 {
          font-size: 20px;
          color: #2c3e50;
          margin-bottom: 24px;
          font-weight: 600;
          position: relative;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 2px;
            background: linear-gradient(45deg, #8B4513, #D2691E);
            border-radius: 2px;
          }
        }
        
        ul {
          list-style: none;
          padding: 0;
          
          li {
            margin-bottom: 16px;
            
            a {
              color: #666;
              text-decoration: none;
              font-size: 15px;
              transition: all 0.3s ease;
              position: relative;
              padding-left: 16px;
              
              &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                width: 6px;
                height: 6px;
                background: #8B4513;
                border-radius: 50%;
                transform: translateY(-50%);
                opacity: 0;
                transition: all 0.3s ease;
              }
              
              &:hover {
                color: #8B4513;
                padding-left: 20px;
                
                &::before {
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
    
    .footer-bottom {
      text-align: center;
      margin-top: 60px;
      padding-top: 30px;
      border-top: 1px solid #eee;
      
      p {
        color: #95a5a6;
        font-size: 14px;
        
        &:hover {
          background: linear-gradient(45deg, #8B4513, #D2691E);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}

// 响应式布局优化
@media screen and (max-width: 768px) {
  .home {
    .search-section {
      .search-container {
        flex-direction: column;
        gap: 20px;
        
        .website-title {
          font-size: 28px;
        }
        
        .search-box {
          width: 100%;
        }
      }
    }
    
    .category-section {
      .category-container {
        flex-direction: column;
        gap: 20px;
        
        .auction-entrance {
          width: 100%;
          justify-content: center;
        }
      }
    }
    
    .section {
      .el-col {
        width: 100%;
      }
    }
    
    .footer {
      .footer-content {
        flex-direction: column;
        gap: 40px;
        
        .footer-section {
          text-align: center;
          
          h3::after {
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
}
</style>


